.base {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  font-size: var(--cui-body-m-font-size);
  font-weight: var(--cui-font-weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border-style: solid;
  border-width: var(--cui-border-width-kilo);
  transition:
    opacity var(--cui-transitions-default),
    color var(--cui-transitions-default),
    background-color var(--cui-transitions-default),
    border-color var(--cui-transitions-default);
}

.base[hidden] {
  display: none;
}

.base[aria-busy="true"] {
  position: relative;
  overflow: hidden;
}

/* Loader */
.loader {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  visibility: hidden;
  grid-auto-flow: column;
  gap: var(--loader-gap);
  place-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition:
    opacity var(--cui-transitions-default),
    visibility var(--cui-transitions-default);
}

/* The animation of the dots consists of five phases: an 80ms pause
   and four 160ms transitions between each dot being highlighted */

.dot {
  --loader-opacity: 0.25;

  display: block;
  width: var(--loader-diameter);
  height: var(--loader-diameter);
  background-color: currentColor;
  border-radius: var(--cui-border-radius-circle);
  animation-duration: 720ms; /* 80ms + 4 * 160ms */
  animation-timing-function: cubic-bezier(0.75, 0, 1, 1);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

@keyframes pulse1 {
  0%,
  11%,
  55%,
  100% {
    opacity: var(--loader-opacity);
    transform: scale(100%);
  }

  33% {
    opacity: 1;
    transform: var(--loader-transform);
  }
}

.dot:nth-child(1) {
  animation-name: pulse1;
}

@keyframes pulse2 {
  0%,
  33%,
  77%,
  100% {
    opacity: var(--loader-opacity);
    transform: scale(100%);
  }

  55% {
    opacity: 1;
    transform: var(--loader-transform);
  }
}

.dot:nth-child(2) {
  animation-name: pulse2;
}

@keyframes pulse3 {
  0%,
  55%,
  100% {
    opacity: var(--loader-opacity);
    transform: scale(100%);
  }

  77% {
    opacity: 1;
    transform: var(--loader-transform);
  }
}

.dot:nth-child(3) {
  animation-name: pulse3;
}

.base[aria-busy="true"] .loader {
  visibility: inherit;
  opacity: 1;
}

.base[aria-busy="true"] .dot {
  animation-play-state: running;
}

/* Content */
.content {
  display: flex;
  gap: var(--content-gap);
  place-content: center;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  opacity: 1;
  transition: opacity var(--cui-transitions-default);
}

.base:active .content,
.base[aria-expanded="true"] .content,
.base[aria-pressed="true"] .content {
  transform: translate(0, 1px);
}

.base[aria-busy="true"] .content {
  opacity: 0;
}

.leading-icon {
  width: var(--leading-icon-size);
  height: var(--leading-icon-size);
}

.trailing-icon {
  width: var(--cui-icon-sizes-kilo);
  height: var(--cui-icon-sizes-kilo);
}

/* Sizes */
.s {
  --content-gap: var(--cui-spacings-bit);
  --leading-icon-size: var(--cui-icon-sizes-kilo);
  --loader-diameter: 4px;
  --loader-gap: 3px;
  --loader-transform: scale(150%);

  font-size: var(--cui-body-s-font-size);
  line-height: var(--cui-body-s-line-height);
  border-radius: var(--cui-border-radius-byte);
}

.m {
  --content-gap: var(--cui-spacings-byte);
  --leading-icon-size: var(--cui-icon-sizes-mega);
  --loader-diameter: 6px;
  --loader-gap: 5px;
  --loader-transform: scale(133%);

  font-size: var(--cui-body-m-font-size);
  line-height: var(--cui-body-m-line-height);
  border-radius: var(--cui-border-radius-byte);
}

/* Variants */
.primary {
  color: var(--cui-fg-on-strong);
  background-color: var(--cui-bg-accent-strong);
  border-color: transparent;
}

.primary:hover {
  color: var(--cui-fg-on-strong-hovered);
  background-color: var(--cui-bg-accent-strong-hovered);
  border-color: transparent;
}

.primary:active,
.primary[aria-expanded="true"],
.primary[aria-pressed="true"] {
  color: var(--cui-fg-on-strong-pressed);
  background-color: var(--cui-bg-accent-strong-pressed);
  border-color: transparent;
}

.primary.destructive {
  background-color: var(--cui-bg-danger-strong);
}

.primary.destructive:hover {
  background-color: var(--cui-bg-danger-strong-hovered);
}

.primary.destructive:active,
.primary.destructive[aria-expanded="true"],
.primary.destructive[aria-pressed="true"] {
  background-color: var(--cui-bg-danger-strong-pressed);
}

.primary:disabled,
.primary[disabled],
.primary[aria-disabled="true"] {
  color: var(--cui-fg-normal-disabled);
  background-color: var(--cui-bg-highlight-disabled);
  border-color: transparent;
}

.primary.destructive:disabled,
.primary.destructive[disabled],
.primary.destructive[aria-disabled="true"] {
  color: var(--cui-fg-danger-disabled);
  background-color: var(--cui-bg-danger-disabled);
  border-color: transparent;
}

.secondary {
  color: var(--cui-fg-normal);
  background-color: var(--cui-bg-normal);
  border-color: var(--cui-border-normal);
}

.secondary:hover {
  color: var(--cui-fg-normal-hovered);
  background-color: var(--cui-bg-subtle-hovered);
  border-color: var(--cui-border-normal-hovered);
}

.secondary:active,
.secondary[aria-expanded="true"],
.secondary[aria-pressed="true"] {
  color: var(--cui-fg-normal-pressed);
  background-color: var(--cui-bg-subtle-pressed);
  border-color: var(--cui-border-normal-pressed);
}

.secondary.destructive {
  color: var(--cui-fg-danger);
}

.secondary.destructive:hover {
  color: var(--cui-fg-danger-hovered);
  background-color: var(--cui-bg-danger-hovered);
  border-color: var(--cui-border-danger-hovered);
}

.secondary.destructive:active,
.secondary.destructive[aria-expanded="true"],
.secondary.destructive[aria-pressed="true"] {
  color: var(--cui-fg-danger-pressed);
  background-color: var(--cui-bg-danger-pressed);
  border-color: var(--cui-border-danger-pressed);
}

.secondary:disabled,
.secondary[disabled],
.secondary[aria-disabled="true"] {
  color: var(--cui-fg-normal-disabled);
  background-color: var(--cui-bg-normal);
  border-color: var(--cui-border-normal-disabled);
}

.secondary.destructive:disabled,
.secondary.destructive[disabled],
.secondary.destructive[aria-disabled="true"] {
  color: var(--cui-fg-danger-disabled);
  background-color: var(--cui-bg-normal);
  border-color: var(--cui-border-normal-disabled);
}

.tertiary {
  color: var(--cui-fg-accent);
  background-color: transparent;
  border-color: transparent;
}

.tertiary:hover {
  color: var(--cui-fg-accent-hovered);
  background-color: transparent;
  border-color: transparent;
}

.tertiary:active,
.tertiary[aria-expanded="true"],
.tertiary[aria-pressed="true"] {
  color: var(--cui-fg-accent-pressed);
  background-color: transparent;
  border-color: transparent;
}

.tertiary.destructive {
  color: var(--cui-fg-danger);
}

.tertiary.destructive:hover {
  color: var(--cui-fg-danger-hovered);
  background-color: transparent;
}

.tertiary.destructive:active,
.tertiary.destructive[aria-expanded="true"],
.tertiary.destructive[aria-pressed="true"] {
  color: var(--cui-fg-danger-pressed);
  background-color: transparent;
}

.tertiary .label {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-position: under;
  transition: text-decoration-color var(--cui-transitions-default);
}

@supports (text-underline-offset: 0.25em) {
  .tertiary .label {
    text-underline-position: auto;
    text-underline-offset: 0.25em;
  }
}

.tertiary:disabled,
.tertiary[disabled],
.tertiary[aria-disabled="true"] {
  color: var(--cui-fg-normal-disabled);
  background-color: transparent;
  border-color: transparent;
}

.tertiary.destructive:disabled,
.tertiary.destructive[disabled],
.tertiary.destructive[aria-disabled="true"] {
  color: var(--cui-fg-danger-disabled);
}

/* ButtonGroup */
@container cui-button-group (width < 360px) {
  .base {
    width: 100%;
  }
}

/* Disabled */
.base:disabled,
.base[disabled],
.base[aria-disabled="true"] {
  cursor: not-allowed;
}

.base:disabled .content,
.base[disabled] .content,
.base[aria-disabled="true"] .content {
  transform: translate(0);
}
